<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">list页面</block></cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchText" :adjust-position="false" type="text" placeholder="单行文本" confirm-type="search"></input>
			</view>
			
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" @tap="searchList">搜索</button>
			</view>
		</view>
		<button class="cu-btn cuIcon-add bg-blue shadow circle" @tap="addNew"></button>
		<scroll-view refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresh" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]" scroll-y="true" @scrolltolower="" lower-threshold="50">
			<view class="cu-list menu" v-for="(item,index) in list" style="margin-top:0;border-top: 1px solid #eee;">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
						<text class="text-grey">{{item.testInput || item.id}}</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-olive light">{{getValue(item.status)}}</view>
						<view class="cu-tag round bg-blue light">{{item.createDate}}</view>
					</view>
				</view>
				
			</view>
			<view class="cu-load bg-white" v-if="list.length > 0 && list.length % pageSize == 0" @tap="next">加载更多..</view>
			<view style="height:100upx"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default{
		data(){
			return {
				list:[],
				pageNo:1,
				pageSize:20,
				searchText:"",
				modalName:"",
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar:this.CustomBar,
				triggered:false,
				statusDic:[],
				test:""
			}
		},
		onShow() {
			let _this = this;
			this.getListPre(_this);
		},
		computed:{
			
		},
		methods:{
			...mapActions(["JAjax","JgetDic"]),
			refresh(){
				this.triggered = true
				this.list = []
				this.pageNo = 1
				this.getList()
			},
			// 获取list之前先获取字典
			getListPre:async (_this)=>{
				// yes_no字典
				let result = await _this.JgetDic("sys_yes_no");
				_this.statusDic = result.data;
				_this.getList();
			},
			// 根据字典key获取value
			getValue(key){
				let result = '未知';
				this.statusDic.forEach((item,index)=>{
					if(item.dictValue == key){
						result =  item.dictLabel
					}
				})
				return result;
			},
			getList(){
				uni.showLoading({
					title:"加载中",
					icon:"none"
				})
				this.JAjax({
					
					//url: '/a/sys/empUser/listData?pageSize='+this.pageSize + "&pageNo="+this.pageNo + "&testInput=" + this.searchText,
					url: '/a/test/testData/listData?pageSize='+this.pageSize + "&pageNo="+this.pageNo + "&testInput=" + this.searchText,
					success: data=>{
						this.triggered = false;
						uni.hideLoading();
						if(data.data.pageNo == this.pageNo){
							if (data.statusCode == 200 && data.data) {
								if(this.list.length == 0){
									this.list = data.data.list;
								} else {
									this.list = this.list.concat(data.data.list);
								}
							}	
						} else {
							uni.showToast({
								title:"没有更多的数据了",
								icon:"none"
							})
						}
						
					}
				});
			},
			next(){
				this.pageNo++;
				this.getList();
			},
			searchList(){
				this.list = []
				this.pageNo = 1
				this.getList();
			},
			// 添加一个新的
			addNew(){
				uni.navigateTo({
					url: "form",
					animationType: "zoom-out"
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},	
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style scoped>
	.page{
		
		background-color: white;
	}
	.circle {
		position: fixed;
		border-radius: 50%;
		width: 100upx;
		height: 100upx;
		font-size: 60upx;
		bottom: 40upx;
		right: 40upx;
		z-index: 999;
	}
</style>
